import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import Pagination from '../../ch/components/Pagination.vue';

<Meta
  title="Components/Pagination"
  component={Pagination}
  argTypes={{
    type:    { control: { type: 'select', options: ['outline', 'outline-negative'] } },
    field:   { control: { type: 'boolean' } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Pagination },
  template: '<div><Pagination :type="type" :field="field" :currentPage="currentPage" :totalPages="totalPages" :paginationItems="paginationItems" /></div>',
});

# Pagination

Right and left arrows have disabled states:
- left arrow is disabled when current page is the first one
- right arrow is disabled when current page is the last one.

## Default Compact Pagination

<Canvas>
  <Story
    name="Example"
    args={{
      currentPage: '1',
      totalPages: 'von 13 Seiten',
      paginationItems: [
        {
          icon: "ChevronLeft",
          label: "Previous Page",
          link: "#prev"
        },
        {
          icon: "ChevronRight",
          label: "Next Page",
          link: "#next"
        }
      ]
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Example" />

